<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="img/apple-icon.png">
	<link rel="icon" type="image/png" href="img/favicon.png">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Components Documentation - Material Kit by Creative Tim</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

	<!--     Fonts and icons     -->
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

	<!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/material-kit.css" rel="stylesheet"/>
	<link href="assets-for-demo/demo.css" rel="stylesheet" />

    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

	<style>
		pre.prettyprint{
		    background-color: #eee;
		    border: 0px;
		    margin-bottom: 60px;
		    margin-top: 30px;
		    padding: 20px;
		    text-align: left;
		}
		.atv, .str{
		    color: #05AE0E;
		}
		.tag, .pln, .kwd{
		    color: #3472F7;
		}
		.atn{
		    color: #2C93FF;
		}
		.pln{
		    color: #333;
		}
		.com{
		    color: #999;
		}
		.space-top{
		    margin-top: 50px;
		}
		.area-line{
		    border: 1px solid #999;
		    border-left: 0;
		    border-right: 0;
		    color: #666;
		    display: block;
		    margin-top: 20px;
		    padding: 8px 0;
		    text-align: center;
		}
		.area-line a{
		    color: #666;
		}
		.container-fluid{
		    padding-right: 15px;
		    padding-left: 15px;
		}
		.table-shopping .td-name{
			min-width: 130px;
		}
		.pick-class-label{
            border-radius: 8px;
            border: 1px solid #999;
            color: #ffffff;
            cursor: pointer;
            display: inline-block;
            font-size: 75%;
            font-weight: bold;
            line-height: 1;
            margin-right: 10px;
            padding: 23px;
            text-align: center;
            vertical-align: baseline;
            white-space: nowrap;
        }

	</style>
</head>

<body class="components-page">

<nav class="navbar navbar-transparent navbar-fixed-top navbar-color-on-scroll" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button id="menu-toggle" type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar bar1"></span>
        <span class="icon-bar bar2"></span>
        <span class="icon-bar bar3"></span>
      </button>
      <a href="http://www.creative-tim.com">
           <div class="logo-container">
                <div class="logo">
                    <img src="img/logo.png" alt="Creative Tim Logo">
                </div>
                <div class="brand">
                    Creative Tim
                </div>
            </div>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
		<ul  class="nav navbar-nav navbar-right">
			<li>
				<a href="index.html">Back to Kit</a>
			</li>
			<li>
                <a href="https://github.com/timcreative/material-kit-pro/issues">Have an issue?</a>
            </li>
    	</ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

	<div class="page-header header-filter header-small" style="background-image: url('https://images.unsplash.com/photo-1423655156442-ccc11daa4e99?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450');">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<h1 class="title text-center">Components Documentation</h1>
				</div>
			</div>
		</div>
	</div>

    <div class="main main-raised">
        <div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <div class="fixed-section" data-spy="affix" data-offset-top="340">
                    <ul>
                        <li><a href="#buttons-row">Buttons</a></li>
                        <li><a href="#checkbox-row">Checkbox/Radio/Toggle</a></li>
                        <li><a href="#dropdown-row">Dropdown/Dropup</a></li>
                        <li><a href="#inputs-row">Inputs</a></li>
                        <li><a href="#textarea-row">Textarea</a></li>
                        <li><a href="#select-row">Select</a></li>
                        <li><a href="#tags-row">Tags</a></li>
                        <li><a href="#navbar-row">Navigation</a></li>
                        <li><a href="#headers-row">Headers</a></li>
                        <li><a href="#subscription-row">Subscription Area</a></li>
                        <li><a href="#footer-row">Footers</a></li>
                        <li><a href="#comments-row">Comments Area</a></li>
                        <li><a href="#pagination-row">Pagination</a></li>
                        <li><a href="#progressbar-row">Progress Bars</a></li>
                        <li><a href="#sliders-row">Sliders</a></li>
                        <li><a href="#labels-row">Labels</a></li>
                        <li><a href="#tables-row">Tables</a></li>
                        <li><a href="#datepicker-row">Datepicker</a></li>
                        <li><a href="#modal-row">Modals</a></li>
                        <li><a href="#collapse-row">Collapsable Groups</a></li>
                        <li><a href="#tooltip-row">Tooltips/Popovers</a></li>
                        <li><a href="#uploader-row">File Uploader</a></li>
						<li><a href="#icons-row">Material Icons</a></li>
                        <li><a href="#notification-row">Notifications</a></li>
                        <li><a href="#info-areas-row">Info Areas</a></li>
                        <li><a href="#cards-row">Cards</a></li>
                        <li><a href="#sections-row">Sections</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-8 col-md-offset-1">
                <div class="tim-container">

	    	<!-- buttons row -->
	        <div class="tim-row" id="buttons-row">

                <h2>Buttons</h2>
                <legend></legend>
                <h4>Colors</h4>
                <p>We worked over the original Bootstrap classes, choosing a different, slightly intenser colour palette. We have also added a pink button, defined by the <code>.btn-rose</code> class.</p>
                <p>
                       <button class="btn btn-default">Default</button>
                       <button class="btn btn-primary">Primary</button>
                       <button class="btn btn-info">Info</button>
                       <button class="btn btn-success">Success</button>
                       <button class="btn btn-warning">Warning</button>
                       <button class="btn btn-danger">Danger</button>
                       <button class="btn btn-rose">Rose</button>
                </p>

    			<pre class="prettyprint">

&lt;button class=&quot;btn btn-default&quot;&gt;Default&lt;/button&gt;
&lt;button class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
&lt;button class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
&lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button class=&quot;btn btn-rose&quot;&gt;Rose&lt;/button&gt;
    			</pre>


            	<h4>Sizes</h4>
                <p>Buttons come in all needed sizes:</p>
                <p>
                    <button class="btn btn-primary btn-lg">Large</button>
                    <button class="btn btn-primary">Normal</button>
                    <button class="btn btn-primary btn-sm">Small</button>
                    <button class="btn btn-primary btn-xs">Extra Small</button>
                </p>

				<pre class="prettyprint">

&lt;button class=&quot;btn btn-primary btn-lg&quot;&gt;Large&lt;/button&gt;
&lt;button class=&quot;btn btn-primary&quot;&gt;Normal&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-sm&quot;&gt;Small&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-xs&quot;&gt;Extra Small&lt;/button&gt;
    			</pre>

				<h4>Styles</h4>
                <p>We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or simple buttons.  If you are using buttons that only have an icon inside of them, you can add <code>.btn-just-icon</code> so the icon properly aligns. Let's see some examples:
                </p>
				<p>
					<button class="btn btn-primary">Default</button>
					<button class="btn btn-primary btn-round">Round</button>
					<button class="btn btn-primary btn-round">
						<i class="material-icons">favorite</i> With Icon
					</button>
					<button class="btn btn-primary btn-fab btn-fab-mini btn-round">
						<i class="material-icons">favorite</i>
					</button>
					<button class="btn btn-primary btn-simple">Simple</button>

                </p>

    			<pre class="prettyprint">
&lt;button class=&quot;btn btn-primary &quot;&gt;Default&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-round&quot;&gt;Round&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-round&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;favorite&lt;/i&gt; With Icon
&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-fab btn-fab-mini btn-round&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;favorite&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-simple&quot;&gt;Default&lt;/button&gt;
    			</pre>

                <p>
                    Button groups, toolbars, and disabled state all work like they are supposed to. We used the Font Awesome icons that can be found <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a> and Material Design Icons that can be found <a href="https://design.google.com/icons/" target="_blank"> here</a>.
                </p>
                <br />
                <h4>Social</h4>
                <p>We have created special buttons for the main social networks. You can use the buttons with any styles, you just need to add the class <code>.btn-[#social-network]</code> for the button to have the brand colour of the network. </p>
                    <button class="btn btn-fab btn-twitter">
                        <i class="fa fa-twitter"></i>
                    </button>
                    <button class="btn btn-just-icon btn-twitter">
                        <i class="fa fa-twitter"></i>
                    </button>
                    <button class="btn btn-simple btn-twitter btn-just-icon">
                        <i class="fa fa-twitter"></i>
                    </button>
                    <br /><br />
                    <button class="btn btn-fab btn-facebook">
                        <i class="fa fa-facebook"> </i>
                    </button>
                    <button class="btn btn-fab btn-google">
                        <i class="fa fa-google"> </i>
                    </button>
                    <button class="btn btn-fab btn-linkedin">
                        <i class="fa fa-linkedin"></i>
                    </button>
                    <button class="btn btn-fab btn-pinterest">
                        <i class="fa fa-pinterest"></i>
                    </button>
                    <button class="btn btn-fab btn-youtube">
                        <i class="fa fa-youtube"> </i>
                    </button>
                    <button class="btn btn-fab btn-tumblr">
                        <i class="fa fa-tumblr"> </i>
                    </button>
                    <button class="btn btn-fab btn-github">
                        <i class="fa fa-github"></i>
                    </button>
                    <button class="btn btn-fab btn-dribbble">
                        <i class="fa fa-dribbble"></i>
                    </button>
                    <button class="btn btn-fab btn-reddit">
                        <i class="fa fa-reddit"></i>
                    </button>
                    <button class="btn btn-fab btn-instagram">
                        <i class="fa fa-instagram"> </i>
                    </button>

                <pre class="prettyprint">
&lt;button class=&quot;btn btn-fab btn-twitter&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-just-icon btn-twitter&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-twitter btn-just-icon&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;br /&gt;
&lt;button class=&quot;btn btn-fab btn-facebook&quot;&gt;
    &lt;i class=&quot;fa fa-facebook&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-google&quot;&gt;
    &lt;i class=&quot;fa fa-google&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-linkedin&quot;&gt;
    &lt;i class=&quot;fa fa-linkedin&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-pinterest&quot;&gt;
    &lt;i class=&quot;fa fa-pinterest&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-youtube&quot;&gt;
    &lt;i class=&quot;fa fa-youtube&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-tumblr&quot;&gt;
    &lt;i class=&quot;fa fa-tumblr&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-github&quot;&gt;
    &lt;i class=&quot;fa fa-github&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-dribbble&quot;&gt;
    &lt;i class=&quot;fa fa-dribbble&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-reddit&quot;&gt;
    &lt;i class=&quot;fa fa-reddit&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button class=&quot;btn btn-fab btn-instagram&quot;&gt;
    &lt;i class=&quot;fa fa-instagram&quot;&gt; &lt;/i&gt;
&lt;/button&gt;
                </pre>
        	</div>
    		<!--  end row -->

    		<!-- checkbox row -->
        	<div class="tim-row" id="checkbox-row">
                <h2> Checkboxes </h2>
                <legend></legend>
                <p>
                    To use the custom checkboxes, you don't need to import any separate Javascript file, everything is inside material.min.js
                </p>
                <p>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes">
							Unchecked
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes" checked>
							Checked
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes" disabled>
							Disabled Unchecked
						</label>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="optionsCheckboxes" disabled checked>
							Disabled Checked
						</label>
					</div>
                </p>

    			<pre class="prettyprint">
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot;&gt;
		Unchecked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; checked&gt;
		Checked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled&gt;
		Disabled Unchecked
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;checkbox&quot; name=&quot;optionsCheckboxes&quot; disabled checked&gt;
		Disabled Checked
	&lt;/label&gt;
&lt;/div&gt;

				</pre>
        	</div>
    		<!-- end row -->

    		<!-- radio row -->
        	<div class="tim-row" id="radio-row">
            	<h2> Radio Buttons </h2>
            	<legend></legend>
                <p>
                    To use the custom radio buttons, you don't need to import any separate Javascript file, everything is inside material.min.js.
                </p>
                <p>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadios">
							Radio is off
						</label>
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadios" checked="true">
							Radio is on
						</label>
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadiosDisabled" disabled>
							Disabled Radio is off
						</label>
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
							Disabled Radio is on
						</label>
					</div>
                </p>

				<pre class="prettyprint">
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot;&gt;
		Radio is off
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; checked=&quot;true&quot;&gt;
		Radio is on
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; disabled&gt;
		Disabled Radio is off
	&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
	&lt;label&gt;
		&lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; checked=&quot;true&quot; disabled&gt;
		Disabled Radio is on
	&lt;/label&gt;
&lt;/div&gt;
    			</pre>
		    </div>
		    <!-- end row -->

    		<!-- switches row -->
        	<div class="tim-row" id="switch-row">
            	<h2>Toggle Buttons</h2>
            	<legend></legend>
	            <p>If you want to use something more special than a checkbox, we recommend the toggle buttons.</p>

				<div class="togglebutton">
					<label>
						<input type="checkbox" checked="">
						Toggle is on
					</label>
				</div>

				<div class="togglebutton">
					<label>
						<input type="checkbox">
						Toggle is off
					</label>
				</div>

    			<pre class="prettyprint">

&lt;div class=&quot;togglebutton&quot;&gt;
	&lt;label&gt;
    	&lt;input type=&quot;checkbox&quot; checked=&quot;&quot;&gt;
		Toggle is on
	&lt;/label&gt;
&lt;/div&gt;

&lt;div class=&quot;togglebutton&quot;&gt;
	&lt;label&gt;
    	&lt;input type=&quot;checkbox&quot;&gt;
		Toggle is off
	&lt;/label&gt;
&lt;/div&gt;
    			</pre>
    		</div>
    		<!-- end row -->

		    <!-- dropdown row -->
		    <div class="tim-row" id="dropdown-row">
            	<h2> Dropdown </h2>
            	<legend></legend>
            	<p> We are very proud to present the dropdown which has a subtle animation. We also thought of another use-case: dropdown with flags. <b>IMPORTANT!</b> The focus state is <b>Purple</b> by default and, on the dropdowns from the navbars, they will take the colour of the parent navbar.</p>

	            <div class="row">
	                <div class="col-md-3">
    	                <div class="dropdown">
    	                	<a href="#pablo" class="btn dropdown-toggle" data-toggle="dropdown">
    	                    	Regular
    	                    	<b class="caret"></b>
    	                	</a>
    	                	<ul class="dropdown-menu">
    	                    	<li><a href="#pablo">Action</a></li>
    	                    	<li><a href="#pablo">Another action</a></li>
    	                    	<li><a href="#pablo">Something else here</a></li>
    	                    	<li class="divider"></li>
    	                    	<li><a href="#pablo">Separated link</a></li>
    	                    	<li class="divider"></li>
    	                    	<li><a href="#pablo">One more separated link</a></li>
    	                	</ul>
	                    </div>
	                </div>

	                <div class="col-md-3">
    	                <div class="dropdown">
    	                    <a href="#pablo" class="btn dropdown-toggle " data-toggle="dropdown">
    	                        <img src="img/flags/US.png"/>
    	                         Flags
    	                         <b class="caret"></b>
    	                    </a>
    	                    <ul class="dropdown-menu">
    	                        <li><a href="#pablo"><img src="img/flags/DE.png"/> Deutsch</a></li>
    	                        <li><a href="#pablo"><img src="img/flags/GB.png"/> English(UK)</a></li>
    	                        <li><a href="#pablo"><img src="img/flags/FR.png"/> Français</a></li>
    	                        <li><a href="#pablo"><img src="img/flags/RO.png"/> Română</a></li>
    	                        <li><a href="#pablo"><img src="img/flags/IT.png"/> Italiano</a></li>

    	                        <li class="divider"></li>
    	                        <li><a href="#pablo"><img src="img/flags/ES.png"/> Español <span class="label label-default">soon</span></a></li>
    	                        <li><a href="#pablo"><img src="img/flags/BR.png"/> Português <span class="label label-default">soon</span></a></li>
    	                        <li><a href="#pablo"><img src="img/flags/JP.png"/> 日本語 <span class="label label-default">soon</span></a></li>
    	                    </ul>
    	                </div>
	                </div>
	            </div>

    			<pre class="prettyprint">
&lt;div class=&quot;dropdown&quot;&gt;
	&lt;a href=&quot;#&quot; class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
    	Regular
    	&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
	&lt;/a&gt;
	&lt;ul class=&quot;dropdown-menu&quot;&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
		&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
		&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
    			</pre>
		    </div>
		    <!-- end row -->

		    <!-- dropup row -->
		    <div class="tim-row" id="dropup-row">
            	<h2> Dropup </h2>
            	<legend></legend>
            	<p>We restyled the dropup and added a different animation for the opening. You can see the full implementation below.</p>
        	   <span class="dropup">
                  <button href="#pablo" class="dropdown-toggle btn btn-primary btn-round" data-toggle="dropdown">Dropup <b class="caret"></b></button>
<!--                                  You can add classes for different colours on the next element -->
                  <ul class="dropdown-menu dropdown-primary dropdown-menu-right">
                    <li class="dropdown-header">Dropdown header</li>
                    <li><a href="#pablo">Action</a></li>
                    <li><a href="#pablo">Another action</a></li>
                    <li><a href="#pablo">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#pablo">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#pablo">One more separated link</a></li>
                  </ul>
                </span>
                <pre class="prettyprint">
&lt;span class=&quot;dropup&quot;&gt;
  &lt;button href=&quot;#&quot; class=&quot;dropdown-toggle btn btn-primary btn-round&quot; data-toggle=&quot;dropdown&quot;&gt;Dropup &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/button&gt;
  &lt;ul class=&quot;dropdown-menu dropdown-primary dropdown-menu-right&quot;&gt;
    &lt;li class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/span&gt;
                </pre>
            </div>


    		<!-- inputs row -->
        	<div class="tim-row" id="inputs-row">
                <h2>Inputs </h2>
                <legend></legend>

                <p>
                We restyled the Bootstrap inputs to give them a more flat, minimal look. You can use them with regular labels, floating labels and states or input groups.
                </p>
                <div class="row">
					<div class="col-sm-4">
	                	<div class="form-group">
	        	        	<input type="text" value="" placeholder="Regular" class="form-control" />
	                	</div>
	                </div>

					<div class="col-sm-4">
						<div class="form-group label-floating">
							<label class="control-label">With Floating Label</label>
							<input type="email" class="form-control">
						</div>
					</div>

	                <div class="col-sm-4">
	                	<div class="form-group label-floating has-success">
							<label class="control-label">Success input</label>
	                    	<input type="text" value="Success" class="form-control" />
							<span class="form-control-feedback">
								<i class="material-icons">done</i>
							</span>
	                	</div>
	                </div>

	                <div class="col-sm-4">
	                	<div class="form-group label-floating has-error">
							<label class="control-label">Error input</label>
	                    	<input type="email" value="Error Input" class="form-control" />
	                    	<span class="material-icons form-control-feedback">clear</span>
	                	</div>
	                </div>

					<div class="col-sm-4">
						<div class="input-group">
							<span class="input-group-addon">
								<i class="material-icons">group</i>
							</span>
							<input type="text" class="form-control" placeholder="With Material Icons">
						</div>
					</div>

					<div class="col-sm-4">
						<div class="input-group">
							<span class="input-group-addon">
								<i class="fa fa-group"></i>
							</span>
							<input type="text" class="form-control" placeholder="With Font Awesome Icons">
						</div>
					</div>
	        	</div>


    			<pre class="prettyprint">

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group&quot;&gt;
    	&lt;input type=&quot;text&quot; value=&quot;&quot; placeholder=&quot;Regular&quot; class=&quot;form-control&quot; /&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;With Floating Label&lt;/label&gt;
		&lt;input type=&quot;email&quot; class=&quot;form-control&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating has-success&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;Success input&lt;/label&gt;
		&lt;input type=&quot;text&quot; value=&quot;Success&quot; class=&quot;form-control&quot; /&gt;
		&lt;span class=&quot;form-control-feedback&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;done&lt;/i&gt;
		&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;form-group label-floating has-error&quot;&gt;
		&lt;label class=&quot;control-label&quot;&gt;Error input&lt;/label&gt;
		&lt;input type=&quot;email&quot; value=&quot;Error Input&quot; class=&quot;form-control&quot; /&gt;
		&lt;span class=&quot;material-icons form-control-feedback&quot;&gt;clear&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;input-group&quot;&gt;
		&lt;span class=&quot;input-group-addon&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;group&lt;/i&gt;
		&lt;/span&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Material Icons&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4&quot;&gt;
	&lt;div class=&quot;input-group&quot;&gt;
		&lt;span class=&quot;input-group-addon&quot;&gt;
			&lt;i class=&quot;fa fa-group&quot;&gt;&lt;/i&gt;
		&lt;/span&gt;
		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;With Font Awesome Icons&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;
				</pre>
    		</div>
    		<!-- end row -->


			<!-- textarea row -->
			<div class="tim-row" id="textarea-row">
			    <h2>Textarea</h2>
			    <legend></legend>
			    <p>The textarea has a new style, so it looks similar to all other inputs.</p>

			    <textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>

				<pre class="prettyprint">
&lt;textarea class=&quot;form-control&quot; placeholder=&quot;Here can be your nice text&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
				</pre>
		    </div>
		    <!-- end row -->

<!--             select row -->
            <div class="tim-row" id="select-row">
                <h2>Select</h2>
                <legend></legend>
                <p>We have styled the select picker to look similar to the dropdown and the other inputs. To see the original documentation, please check out FezVrasta's <a href="https://github.com/FezVrasta/dropdown.js">repo on GitHub</a>.</p>
                <div class="row">
                    <div class="col-md-3">
                        <select class="select form-control">
                          <option disabled selected> Choose city</option>
                          <option value="1">Foobar</option>
                          <option value="2">Is great</option>
                        </select>
                    </div>
                </div>

                <pre class="prettyprint">
&lt;select class=&quot;select form-control&quot;&gt;
  &lt;option disabled selected&gt; Choose city&lt;/option&gt;
  &lt;option value=&quot;1&quot;&gt;Foobar&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;Is great&lt;/option&gt;
&lt;/select&gt;
                </pre>
            </div>
<!--             end row -->

<!--             tags row -->
            <div class="tim-row" id="tags-row">
                <h2>Tags</h2>
                <legend></legend>
                <p>The tags closely resemble the labels and follow the same line of colour. To use them, you need to use the default class <code>.tagsinput</code>, and add a variation of the colour class <code>.tag-[primary/info/success/warning/danger/rose]</code>.</p>
                <input name="tagsinput" class="tagsinput tag-rose" value="Minimal, Light, New, Friends" />
                <pre class="prettyprint">
&lt;input name=&quot;tagsinput&quot; class=&quot;tagsinput tag-rose&quot; value=&quot;Minimal, Light, New, Friends&quot; /&gt;
                </pre>
            </div>
<!--             end row -->

    		<!-- navbar row -->
    		<div class="tim-row" id="navbar-row">
	            <h2>Navbar </h2>
	            <legend></legend>
	            <p>The classic Bootstrap Navbar was restyled:</p>

	            <div id="navbar">
	                <nav class="navbar navbar-default" role="navigation">
	                	<div class="container-fluid">
	                    	<div class="navbar-header">
	                    		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
			                        <span class="sr-only">Toggle navigation</span>
			                        <span class="icon-bar"></span>
			                        <span class="icon-bar"></span>
			                        <span class="icon-bar"></span>
	                    		</button>
	                    		<a class="navbar-brand" href="#pablo">Brand</a>
	                    	</div>

	                    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	                    		<ul class="nav navbar-nav">
	                				<li class="active"><a href="#pablo">Link</a></li>
	                        		<li><a href="#pablo">Link</a></li>
	                        		<li class="dropdown">
	                        			<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	                        			<ul class="dropdown-menu">
											<li><a href="#pablo">Action</a></li>
											<li><a href="#pablo">Another action</a></li>
											<li><a href="#pablo">Something else here</a></li>
											<li class="divider"></li>
											<li><a href="#pablo">Separated link</a></li>
											<li class="divider"></li>
											<li><a href="#pablo">One more separated link</a></li>
	                        			</ul>
	                        		</li>
	                    		</ul>
	                    	</div>
	                	</div>
	                </nav>
	            </div><!--  end navbar -->

	    		<pre class="prettyprint">
&lt;nav class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot;&gt;
	&lt;div class=&quot;container-fluid&quot;&gt;
    	&lt;div class=&quot;navbar-header&quot;&gt;
    		&lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
    		&lt;/button&gt;
    		&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;
    	&lt;/div&gt;

    	&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;
    		&lt;ul class=&quot;nav navbar-nav&quot;&gt;
				&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
        		&lt;li class=&quot;dropdown&quot;&gt;
        			&lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
        			&lt;ul class=&quot;dropdown-menu&quot;&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
					  &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
					  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
					  &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
				      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
        			&lt;/ul&gt;
        		&lt;/li&gt;
    		&lt;/ul&gt;
    	&lt;/div&gt;
	&lt;/div&gt;
&lt;/nav&gt;
	    		</pre>

	            <p class="space-top">Besides the default navbar, we added 5 new colors: blue, green, orange, red, pink. If you want to use one of them, you have to replace the <code>.navbar-default</code> or <code>.navbar-primary</code> with the class for the chosen colour <code>.navbar-info</code>, <code>.navbar-success</code>, <code>.navbar-warning</code>, <code>.navbar-danger</code> or <code>.navbar-rose</code>.</p>

		    <!-- navbar default -->
		    <div id="navbar-default">
		        <nav class="navbar navbar-default" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		                <li class="dropdown">
		                  <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		                  <ul class="dropdown-menu">
		                    <li><a href="#pablo">Action</a></li>
		                    <li><a href="#pablo">Another action</a></li>
		                    <li><a href="#pablo">Something else here</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">Separated link</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">One more separated link</a></li>
		                  </ul>
		                </li>
		              </ul>
		            </div>
		          </div>
		        </nav>

		    </div><!--  end navbar -->

		    <!-- navbar info -->
		    <div id="navbar-info">
	            <nav class="navbar navbar-info" role="navigation">
	              <div class="container-fluid">
	                <!-- Brand and toggle get grouped for better mobile display -->
	                <div class="navbar-header">
	                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	                    <span class="sr-only">Toggle navigation</span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                  </button>
	                  <a class="navbar-brand" href="#pablo">Brand</a>
	                </div>

	                <!-- Collect the nav links, forms, and other content for toggling -->
	                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	                  <ul class="nav navbar-nav">
	                    <li class="active"><a href="#pablo">Link</a></li>
	                    <li><a href="#pablo">Link</a></li>
	                    <li class="dropdown">
	                      <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	                      <ul class="dropdown-menu">
	                        <li><a href="#pablo">Action</a></li>
	                        <li><a href="#pablo">Another action</a></li>
	                        <li><a href="#pablo">Something else here</a></li>
	                        <li class="divider"></li>
	                        <li><a href="#pablo">Separated link</a></li>
	                        <li class="divider"></li>
	                        <li><a href="#pablo">One more separated link</a></li>
	                      </ul>
	                    </li>
	                  </ul>
	                </div><!-- /.navbar-collapse -->
	              </div><!-- /.container-fluid -->
	            </nav>

	        </div><!--  end navbar -->

		    <!-- navbar success -->
		    <div id="navbar-success">
		        <nav class="navbar navbar-success" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		                <li class="dropdown">
		                  <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		                  <ul class="dropdown-menu">
		                    <li><a href="#pablo">Action</a></li>
		                    <li><a href="#pablo">Another action</a></li>
		                    <li><a href="#pablo">Something else here</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">Separated link</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">One more separated link</a></li>
		                  </ul>
		                </li>
		              </ul>
		            </div><!-- /.navbar-collapse -->
		          </div><!-- /.container-fluid -->
		        </nav>

		    </div><!--  end navbar -->

		    <!-- navbar warning -->
		    <div id="navbar-warning">
		        <nav class="navbar navbar-warning" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		                <li class="dropdown">
		                  <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		                  <ul class="dropdown-menu">
		                    <li><a href="#pablo">Action</a></li>
		                    <li><a href="#pablo">Another action</a></li>
		                    <li><a href="#pablo">Something else here</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">Separated link</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">One more separated link</a></li>
		                  </ul>
		                </li>
		              </ul>
		            </div><!-- /.navbar-collapse -->
		          </div><!-- /.container-fluid -->
		        </nav>

		    </div><!--  end navbar -->

		    <!-- navbar danger -->
		    <div id="navbar-danger">
		        <nav class="navbar navbar-danger" role="navigation">
		          <div class="container-fluid">
		            <!-- Brand and toggle get grouped for better mobile display -->
		            <div class="navbar-header">
		              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		              </button>
		              <a class="navbar-brand" href="#pablo">Brand</a>
		            </div>

		            <!-- Collect the nav links, forms, and other content for toggling -->
		            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		              <ul class="nav navbar-nav">
		                <li class="active"><a href="#pablo">Link</a></li>
		                <li><a href="#pablo">Link</a></li>
		                <li class="dropdown">
		                  <a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		                  <ul class="dropdown-menu">
		                    <li><a href="#pablo">Action</a></li>
		                    <li><a href="#pablo">Another action</a></li>
		                    <li><a href="#pablo">Something else here</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">Separated link</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#pablo">One more separated link</a></li>
		                  </ul>
		                </li>
		              </ul>
		            </div><!-- /.navbar-collapse -->
		          </div><!-- /.container-fluid -->
		        </nav>

		    </div><!--  end navbar -->

            <p class="space-top">
                Besides all this customisation, we have an extra navbar. <code>.navbar-transparent</code> is a special class that you can to use if you want the navbar to be transparent and then turn to color after scrolling 260px using the class <code>.navbar-color-on-scroll</code>. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check <a href="navbar-transparent.html">this page</a> out.
            </p>

	    </div>
            <!-- end row -->

            <!-- headers row -->
            <div class="tim-row" id="headers-row">
                <h2>Headers</h2>
                <legend></legend>
                <p>
                    To speed up the creation of a webpage, we created multiple options for the header area. You can choose to add an image and a filter over it; and you can customise the area with subscription forms, offers, videos, etc. You also have an option to add a carousel.<br /><br />
                    See more examples and implementation <a href="sections.html#headers" target="_blank">here</a>.
                </p>
            </div>
            <!-- end row -->

<!--             subscription row -->
            <div class="tim-row" id="subscription-row">
                <h2>Pre-Footer Area</h2>
                <legend></legend>
                <p>Sharing is caring, so we created a special class for sharing areas <code>.social-line</code>. The default option is transparent, but you can opt for black or white with the <code>.social-line-black</code> and <code>.social-line-white</code> classes. We created a special option to increase the size of the social networks icons and you can use it by adding the class <code>.social-line-big-icons</code>.</p>

                <p>Set up a space on your page to gather subscriptions by adding a <code>.subscribe-line</code>. The default options is transparent, but you can also turn in to black by adding <code>.subscribe-line-black</code> or to white by adding <code>.subscribe-line-white</code>. If you want to have a background image with a black layer over the background, you can use the <code>.subscribe-line-image</code>.</p>
                <p>
                To see the examples and the implementation, you can go <a href="index.html#pre-footer-areas" target="_blank">here</a>.</p>
            </div>

<!--             end row -->

<!--             footer row -->
            <div class="tim-row" id="footer-row">
                <h2>Footers</h2>
                <legend></legend>
                <p>The default class is <code>.footer</code>. There are 3 colours you can choose from <code>.footer-white</code>, <code>.footer-black</code> and <code>.footer-gray</code> . If you want to bundle more information than a line of links, you can use the <code>.footer-big</code> option.</p>
                <p>See more examples and implementation <a href="index.html#footers" target="_blank">here</a>.</p>
            </div>
<!--             end row -->

<!--             comments row -->
            <div class="tim-row" id="comments-row">
                <h2>Comments Area</h2>
                <legend></legend>
                <p>For the comments section, we used the Bootstrap classes for media, to which we added the <code>.media-post</code> class. You can use the former class for the area in which an user can post a comment.
All comments should be placed in the class <code>.media-area</code>.
                </p>
                <p>You can see more examples <a href="index.html#comments" target="_blank">here</a>.</p>
            </div>
<!--             end row -->


    	    <!-- nav pills row -->
    	    <div class="tim-row" id="navpills-row">
                <h2> Nav Pills</h2>
                <legend></legend>
                <p>
                    We changed the design for the Bootstrap nav pills into something a bit more fresh. We have also added more colour classes for customisation like <code>.nav-pills-primary</code>, <code>.nav-pills-info</code>, <code>.nav-pills-success</code>, <code>.nav-pills-warning</code>, <code>.nav-pills-danger</code>.
                </p>
                <h4>Simple</h4>
                <p>We added coloured shadows to the pills and created two options: horizontal and vertical.</p>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="nav nav-pills nav-pills-rose">
                          <li class="active"><a href="#pill1" data-toggle="tab">Profile</a></li>
                          <li><a href="#pill2" data-toggle="tab">Settings</a></li>
                          <li><a href="#pill3" data-toggle="tab">Options</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <ul class="nav nav-pills nav-pills-rose nav-stacked">
                          <li class="active"><a href="#tab1" data-toggle="tab">Profile</a></li>
                          <li><a href="#tab2" data-toggle="tab">Settings</a></li>
                          <li><a href="#tab3" data-toggle="tab">Options</a></li>
                        </ul>
                    </div>
                </div>


                <h4>With Icons</h4>
                <p>If you want to also add icons, you can use this version with the two options: horizontal and vertical. To use them, please add the <code>.nav-pills-icons</code> class.</p>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="nav nav-pills nav-pills-icons nav-pills-primary" role="tablist">
            				<li>
            					<a href="#dashboard" role="tab" data-toggle="tab">
            						<i class="material-icons">dashboard</i>
            						Dashboard
            					</a>
            				</li>
            				<li class="active">
            					<a href="#schedule" role="tab" data-toggle="tab">
            						<i class="material-icons">schedule</i>
            						Schedule
            					</a>
            				</li>
            				<li>
            					<a href="#tasks" role="tab" data-toggle="tab">
            						<i class="material-icons">list</i>
            						Tasks
            					</a>
            				</li>
            			</ul>
                    </div>
                    <div class="col-md-2">
                        <ul class="nav nav-pills nav-pills-icons nav-stacked" role="tablist">
    						<li class="active">
    							<a href="#dashboard-2" role="tab" data-toggle="tab">
    								<i class="material-icons">dashboard</i>
    								Dashboard
    							</a>
    						</li>
    						<li >
                                <a href="#schedule-2" role="tab" data-toggle="tab">
    								<i class="material-icons">schedule</i>
    								Schedule
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>


        		<pre class="prettyprint">
&lt;!-- simple and horizontal --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-rose&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#pill1&quot; data-toggle=&quot;tab&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#pill2&quot; data-toggle=&quot;tab&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#pill3&quot; data-toggle=&quot;tab&quot;&gt;Options&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- simple and vertical --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-rose nav-stacked&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#tab1&quot; data-toggle=&quot;tab&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#tab2&quot; data-toggle=&quot;tab&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#tab3&quot; data-toggle=&quot;tab&quot;&gt;Options&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- with icons and horizontal --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-icons nav-pills-primary&quot; role=&quot;tablist&quot;&gt;
	&lt;li&gt;
		&lt;a href=&quot;#dashboard&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;dashboard&lt;/i&gt;
			Dashboard
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li class=&quot;active&quot;&gt;
		&lt;a href=&quot;#schedule&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;schedule&lt;/i&gt;
			Schedule
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;a href=&quot;#tasks&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;list&lt;/i&gt;
			Tasks
		&lt;/a&gt;
	&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- with icons and vertical --&gt;
&lt;ul class=&quot;nav nav-pills nav-pills-icons nav-stacked&quot; role=&quot;tablist&quot;&gt;
	&lt;li class=&quot;active&quot;&gt;
		&lt;a href=&quot;#dashboard-2&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;dashboard&lt;/i&gt;
			Dashboard
		&lt;/a&gt;
	&lt;/li&gt;
	&lt;li &gt;
        &lt;a href=&quot;#schedule-2&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;schedule&lt;/i&gt;
			Schedule
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
        		</pre>
    		    </div>
		    <!-- end row -->

		    <!-- pagination row -->
		    <div class="tim-row" id="pagination-row">
		            <h2>Pagination</h2>
		            <legend></legend>
		            <p>The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the colour classes to offer more customisation like <code>.pagination-info</code>, <code>.pagination-success</code>, <code>.pagination-warning</code>, <code>.pagination-danger</code>.
		        </p>
		        <ul class="pagination pagination-primary">
		          <li><a href="#pablo"><</a></li>
		          <li class="active"><a href="#pablo">1</a></li>
		          <li><a href="#pablo">2</a></li>
		          <li><a href="#pablo">3</a></li>
		          <li><a href="#pablo">4</a></li>
		          <li><a href="#pablo">5</a></li>
		          <li><a href="#pablo">></a></li>
		        </ul>

				<ul class="pagination pagination-info">
		          <li><a href="#pablo"><</a></li>
		          <li><a href="#pablo">1</a></li>
		          <li class="active"><a href="#pablo">2</a></li>
		          <li><a href="#pablo">3</a></li>
		          <li><a href="#pablo">4</a></li>
		          <li><a href="#pablo">5</a></li>
		          <li><a href="#pablo">></a></li>
		        </ul>

		        <ul class="pagination pagination-success">
		          <li><a href="#pablo"><</a></li>
		          <li><a href="#pablo">1</a></li>
		          <li><a href="#pablo">2</a></li>
		          <li class="active"><a href="#pablo">3</a></li>
		          <li><a href="#pablo">4</a></li>
		          <li><a href="#pablo">5</a></li>
		          <li><a href="#pablo">></a></li>
		        </ul>

				<ul class="pagination pagination-warning">
		          <li><a href="#pablo"><</a></li>
		          <li><a href="#pablo">1</a></li>
		          <li><a href="#pablo">2</a></li>
		          <li><a href="#pablo">3</a></li>
		          <li class="active"><a href="#pablo">4</a></li>
		          <li><a href="#pablo">5</a></li>
		          <li><a href="#pablo">></a></li>
		        </ul>

				<ul class="pagination pagination-danger">
		          <li><a href="#pablo"><</a></li>
		          <li><a href="#pablo">1</a></li>
		          <li><a href="#pablo">2</a></li>
		          <li><a href="#pablo">3</a></li>
		          <li><a href="#pablo">4</a></li>
		          <li class="active"><a href="#pablo">5</a></li>
		          <li><a href="#pablo">></a></li>
		        </ul>

		    	<pre class="prettyprint">

&lt;ul class=&quot;pagination pagination-primary&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
	&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;>&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt
		    </pre>
		    </div>
		    <!-- end row -->

		    <!-- progressbar row -->
		    <div class="tim-row" id="progressbar-row">
	            <h2>Progress Bars</h2>
	            <legend></legend>

	            <p>The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean. The default line is gray, each bar has a specific colour but you can add some colours for the background lines using the next classes <code>.progress-line-primary</code>, <code>.progress-line-info</code>, <code>.progress-line-success</code>, <code>.progress-line-warning</code>, <code>.progress-line-danger</code>, </p>
	            <div class="progress">
	            	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
	                	<span class="sr-only">60% Complete</span>
	            	</div>
	            </div>
	            <div class="progress">
	            	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                	<span class="sr-only">60% Complete</span>
	            	</div>
	            </div>
				<div class="progress progress-line-primary">
	            	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
	                	<span class="sr-only">60% Complete</span>
	            	</div>
	            </div>
				<div class="progress progress-line-info">
	            	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                	<span class="sr-only">60% Complete</span>
	            	</div>
	            </div>
	            <div class="progress">
	            	<div class="progress-bar progress-bar-success" style="width: 35%">
	            		<span class="sr-only">35% Complete (success)</span>
	            	</div>
	            	<div class="progress-bar progress-bar-warning" style="width: 20%">
	                	<span class="sr-only">20% Complete (warning)</span>
		            </div>
		            <div class="progress-bar progress-bar-danger" style="width: 10%">
		            	<span class="sr-only">10% Complete (danger)</span>
		            </div>
	            </div>

	    		<pre class="prettyprint">
&lt;div class=&quot;progress&quot;&gt;
	&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 30%;&quot;&gt;
	&lt;span class=&quot;sr-only&quot;&gt;30% Complete&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress&quot;&gt;
	&lt;div class=&quot;progress-bar progress-bar-info&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot;&gt;
	&lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;progress progress-line-primary&quot;&gt;
	&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 30%;&quot;&gt;
	&lt;span class=&quot;sr-only&quot;&gt;30% Complete&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-line-info&quot;&gt;
	&lt;div class=&quot;progress-bar progress-bar-info&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot;&gt;
	&lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;progress&quot;&gt;
	&lt;div class=&quot;progress-bar progress-bar-success&quot; style=&quot;width: 35%&quot;&gt;
	&lt;span class=&quot;sr-only&quot;&gt;35% Complete (success)&lt;/span&gt;
	&lt;/div&gt;
	&lt;div class=&quot;progress-bar progress-bar-warning&quot; style=&quot;width: 20%&quot;&gt;
	&lt;span class=&quot;sr-only&quot;&gt;20% Complete (warning)&lt;/span&gt;
	&lt;/div&gt;
	&lt;div class=&quot;progress-bar progress-bar-danger&quot; style=&quot;width: 10%&quot;&gt;
	&lt;span class=&quot;sr-only&quot;&gt;10% Complete (danger)&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;
			    </pre>
			    </div>
            <!-- end row -->

		    <!-- sliders row -->
		    <div class="tim-row" id="sliders-row">
	            <h2>Sliders</h2>
	            <legend></legend>
	            <p>We restyled noUIslider, while keeping the design consistent. You can use other classes for colors like <code>.slider-info</code>, <code>.slider-success</code>, <code>.slider-warning</code>, <code>.slider-danger</code>. Check also <a href="http://refreshless.com/nouislider/" target="_blank">noUISlider Full Documentation</a>.</p>

				<div id="sliderRegular" class="slider"></div>
				<br />
				<div id="sliderDouble" class="slider slider-info"></div>


	    	<pre class="prettyprint">
&lt;!-- Markup --&gt;
&lt;div id=&quot;sliderRegular&quot; class=&quot;slider&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;sliderDouble&quot; class=&quot;slider slider-info&quot;&gt;&lt;/div&gt;

&lt;!-- Javascript --&gt;
$(&#39;#sliderRegular&#39;).noUiSlider({
start: 40,
connect: &quot;lower&quot;,
range: {
    min: 0,
    max: 100
}
});

$(&#39;#sliderDouble&#39;).noUiSlider({
start: [20, 60] ,
connect: true,
range: {
    min: 0,
    max: 100
}
});
	    	</pre>
			</div>
			<!-- end row -->

		    <!-- labels row -->
		    <div class="tim-row" id="labels-row">
		        <h2>Labels</h2>
		        <legend></legend>
		        <p>We restyled the default options for labels and we added the filled class, that can be used in any combination.</p>
		        <span class="label label-default">Default</span>
		        <span class="label label-primary">Primary</span>
		        <span class="label label-success">Success</span>
		        <span class="label label-info">Info</span>
		        <span class="label label-warning">Warning</span>
		        <span class="label label-danger">Danger</span>

				<pre class="prettyprint">

&lt;span class=&quot;label label-default&quot;&gt;Default&lt;/span&gt;
&lt;span class=&quot;label label-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;label label-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;label label-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;label label-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;label label-danger&quot;&gt;Danger&lt;/span&gt;
		    	</pre>

		    </div>
		    <!-- end row -->

		    <!-- tables row -->
		    <div class="tim-row" id="tables-row">
		        <h2>Tables</h2>
		        <legend></legend>
		        <p>All Boostrap classes for tables are supported and improved.</p>
		        <h4>Simple Table with Actions</h4>
		        <div class="table-responsive">
		            <table class="table">
		                <thead>
		                    <tr>
		                        <th class="text-center">#</th>
		                        <th>Name</th>
		                        <th>Job Position</th>
		                        <th>Since</th>
		                        <th class="text-right">Salary</th>
		                        <th class="text-right">Actions</th>
		                    </tr>
		                </thead>
		                <tbody>
		                    <tr>
		                        <td class="text-center">1</td>
		                        <td>Andrew Mike</td>
		                        <td>Develop</td>
		                        <td>2013</td>
		                        <td class="text-right">&euro; 99,225</td>
		                        <td class="td-actions text-right">
                                    <button type="button" rel="tooltip" class="btn btn-info">
                                        <i class="material-icons">person</i>
                                    </button>
                                    <button type="button" rel="tooltip" class="btn btn-success">
                                        <i class="material-icons">edit</i>
                                    </button>
                                    <button type="button" rel="tooltip" class="btn btn-danger">
                                        <i class="material-icons">close</i>
                                    </button>
		                        </td>
		                    </tr>
		                    <tr>
		                        <td class="text-center">2</td>
		                        <td>John Doe</td>
		                        <td>Design</td>
		                        <td>2012</td>
		                        <td class="text-right">&euro; 89,241</td>
		                        <td class="td-actions text-right">
                                    <button type="button" rel="tooltip" class="btn btn-info btn-round">
                                        <i class="material-icons">person</i>
                                    </button>
                                    <button type="button" rel="tooltip" class="btn btn-success btn-round">
                                        <i class="material-icons">edit</i>
                                    </button>
                                    <button type="button" rel="tooltip" class="btn btn-danger btn-round">
                                        <i class="material-icons">close</i>
                                    </button>
		                        </td>
		                    </tr>
		                    <tr>
		                        <td class="text-center">3</td>
		                        <td>Alex Mike</td>
		                        <td>Design</td>
		                        <td>2010</td>
		                        <td class="text-right">&euro; 92,144</td>
		                        <td class="td-actions text-right">
                                    <button type="button" rel="tooltip" class="btn btn-info btn-simple">
                                        <i class="material-icons">person</i>
                                    </button>
                                    <button type="button" rel="tooltip" class="btn btn-success btn-simple">
                                        <i class="material-icons">edit</i>
                                    </button>
                                    <button type="button" rel="tooltip" class="btn btn-danger btn-simple">
                                        <i class="material-icons">close</i>
                                    </button>
		                        </td>
		                    </tr>
		                </tbody>
		            </table>
		            </div>

					<pre class="prettyprint">

&lt;table class=&quot;table&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th class=&quot;text-center&quot;&gt;#&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Job Position&lt;/th&gt;
            &lt;th&gt;Since&lt;/th&gt;
            &lt;th class=&quot;text-right&quot;&gt;Salary&lt;/th&gt;
            &lt;th class=&quot;text-right&quot;&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td class=&quot;text-center&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;Andrew Mike&lt;/td&gt;
            &lt;td&gt;Develop&lt;/td&gt;
            &lt;td&gt;2013&lt;/td&gt;
            &lt;td class=&quot;text-right&quot;&gt;&amp;euro; 99,225&lt;/td&gt;
            &lt;td class=&quot;td-actions text-right&quot;&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-info&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;person&lt;/i&gt;
                &lt;/button&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-success&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;edit&lt;/i&gt;
                &lt;/button&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-danger&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;close&lt;/i&gt;
                &lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class=&quot;text-center&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;John Doe&lt;/td&gt;
            &lt;td&gt;Design&lt;/td&gt;
            &lt;td&gt;2012&lt;/td&gt;
            &lt;td class=&quot;text-right&quot;&gt;&amp;euro; 89,241&lt;/td&gt;
            &lt;td class=&quot;td-actions text-right&quot;&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-info btn-round&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;person&lt;/i&gt;
                &lt;/button&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-success btn-round&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;edit&lt;/i&gt;
                &lt;/button&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-danger btn-round&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;close&lt;/i&gt;
                &lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class=&quot;text-center&quot;&gt;3&lt;/td&gt;
            &lt;td&gt;Alex Mike&lt;/td&gt;
            &lt;td&gt;Design&lt;/td&gt;
            &lt;td&gt;2010&lt;/td&gt;
            &lt;td class=&quot;text-right&quot;&gt;&amp;euro; 92,144&lt;/td&gt;
            &lt;td class=&quot;td-actions text-right&quot;&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-info btn-simple&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;person&lt;/i&gt;
                &lt;/button&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-success btn-simple&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;edit&lt;/i&gt;
                &lt;/button&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; class=&quot;btn btn-danger btn-simple&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;close&lt;/i&gt;
                &lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
		    </pre>

                <h4>Shopping Cart Table</h4>
                <p>We have also built a shopping cart example table, especially useful if you are building an e-commerce.</p>
                <div class="table-responsive">
                <table class="table table-shopping">
                    <thead>
                        <tr>
                            <th class="text-center"></th>
                            <th >Product</th>
                            <th class="th-description">Color</th>
                            <th class="th-description">Size</th>
                            <th class="text-right">Price</th>
                            <th class="text-right">Qty</th>
                            <th class="text-right">Amount</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="img-container">
                                    <img src="img/product1.jpg" alt="...">
                                </div>
                            </td>
                            <td class="td-name">
                                <a href="#jacket">Spring Jacket</a>
                                <br /><small>by Dolce&Gabbana</small>
                            </td>
                            <td>
                                Red
                            </td>
                            <td>
                                M
                            </td>
                            <td class="td-number">
                                <small>&euro;</small>549
                            </td>
                            <td class="td-number">
                                1
                                <div class="btn-group">
                                    <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">remove</i> </button>
                                    <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">add</i> </button>
                                </div>
                            </td>
                            <td class="td-number">
                                <small>&euro;</small>549
                            </td>
                            <td class="td-actions">
                                <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
                                    <i class="material-icons">close</i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                            </td>
                            <td class="td-total">
                               Total
                            </td>
                            <td class="td-price">
                                <small>&euro;</small>2,346
                            </td>
                            <td colspan="3" class="text-right"> <button type="button" class="btn btn-info btn-round btn-lg">Complete Purchase <i class="material-icons">keyboard_arrow_right</i></button></td>

                        </tr>
                    </tbody>
                </table>
                </div>

                <pre class="prettyprint">
&lt;div class=&quot;table-responsive&quot;&gt;
&lt;table class=&quot;table table-shopping&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th class=&quot;text-center&quot;&gt;&lt;/th&gt;
            &lt;th &gt;Product&lt;/th&gt;
            &lt;th class=&quot;th-description&quot;&gt;Color&lt;/th&gt;
            &lt;th class=&quot;th-description&quot;&gt;Size&lt;/th&gt;
            &lt;th class=&quot;text-right&quot;&gt;Price&lt;/th&gt;
            &lt;th class=&quot;text-right&quot;&gt;Qty&lt;/th&gt;
            &lt;th class=&quot;text-right&quot;&gt;Amount&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;div class=&quot;img-container&quot;&gt;
                    &lt;img src=&quo="img/product1.jpg&quot; alt=&quot;...&quot;&gt;
                &lt;/div&gt;
            &lt;/td&gt;
            &lt;td class=&quot;td-name&quot;&gt;
                &lt;a href=&quot;#jacket&quot;&gt;Spring Jacket&lt;/a&gt;
                &lt;br /&gt;&lt;small&gt;by Dolce&amp;Gabbana&lt;/small&gt;
            &lt;/td&gt;
            &lt;td&gt;
                Red
            &lt;/td&gt;
            &lt;td&gt;
                M
            &lt;/td&gt;
            &lt;td class=&quot;td-number&quot;&gt;
                &lt;small&gt;&amp;euro;&lt;/small&gt;549
            &lt;/td&gt;
            &lt;td class=&quot;td-number&quot;&gt;
                1
                &lt;div class=&quot;btn-group&quot;&gt;
                    &lt;button class=&quot;btn btn-round btn-info btn-xs&quot;&gt; &lt;i class=&quot;material-icons&quot;&gt;remove&lt;/i&gt; &lt;/button&gt;
                    &lt;button class=&quot;btn btn-round btn-info btn-xs&quot;&gt; &lt;i class=&quot;material-icons&quot;&gt;add&lt;/i&gt; &lt;/button&gt;
                &lt;/div&gt;
            &lt;/td&gt;
            &lt;td class=&quot;td-number&quot;&gt;
                &lt;small&gt;&amp;euro;&lt;/small&gt;549
            &lt;/td&gt;
            &lt;td class=&quot;td-actions&quot;&gt;
                &lt;button type=&quot;button&quot; rel=&quot;tooltip&quot; data-placement=&quot;left&quot; title=&quot;Remove item&quot; class=&quot;btn&quot;&gt;
                    &lt;i class=&quot;material-icons&quot;&gt;close&lt;/i&gt;
                &lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td colspan=&quot;3&quot;&gt;
            &lt;/td&gt;
            &lt;td class=&quot;td-total&quot;&gt;
               Total
            &lt;/td&gt;
            &lt;td class=&quot;td-price&quot;&gt;
                &lt;small&gt;&amp;euro;&lt;/small&gt;2,346
            &lt;/td&gt;
            &lt;td colspan=&quot;3&quot; class=&quot;text-right&quot;&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-info btn-round btn-lg&quot;&gt;Complete Purchase &lt;i class=&quot;material-icons&quot;&gt;keyboard_arrow_right&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;

        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
                </pre>
				</div>
		    </div>
		    <!-- end row -->


		    <!-- datepicker row -->
		    <div class="tim-row" id="datepicker-row">
		        <h2>Datepicker</h2>
		        <legend></legend>
		        <p>We re-styled the Bootstrap datepicker. Checkout the <a href="http://www.eyecon.ro/bootstrap-datepicker/" target="_blank">original documentation</a> for a more accurate description of the methods that can be used with it.</p>
		        <div class="row">
		            <div class="col-md-4">
		                <input class="datepicker form-control" type="text" value="03/12/2016"/>
		            </div>
		        </div>
			    <pre class="prettyprint">
&lt;!-- markup --&gt;
&lt;input class=&quot;datepicker form-control&quot; type=&quot;text&quot; value=&quot;03/12/2016&quot;/&gt;

&lt;!-- javascript --&gt;

$(&apos;.datepicker&apos;).datepicker({
	weekStart:1
});
	    		</pre>

			    </div>
            <!-- end row -->

		    <!-- modals row -->
		    <div class="tim-row" id="modal-row">
		        <h2>Modals</h2>
		        <legend></legend>
		        <p>We restyled the classic Bootstrap Modal and gave it a more simple look. We have also created a special modal for alerts.<br />
				<b>IMPORTANT!</b> Please make sure you place the modal body outside of the <code>div.wrapper</code> tag.
		        </p>
		        <!-- Button trigger modal -->
		        <button class="btn btn-primary btn-round" data-toggle="modal" data-target="#myModal">
		            Classic modal
		        </button>
		        <button class="btn btn-round btn-rose" data-toggle="modal" data-target="#smallAlertModal">
                    Small alert modal
                </button>

		    <pre class="prettyprint">
&lt;!-- classic modal --&gt;
&lt;button class=&quot;btn btn-primary btn-round&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;
    Classic modal
&lt;/button&gt;

&lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
	&lt;div class=&quot;modal-dialog&quot;&gt;
		&lt;div class=&quot;modal-content&quot;&gt;
			&lt;div class=&quot;modal-header&quot;&gt;
				&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;
					&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;
				&lt;/button&gt;
				&lt;h4 class=&quot;modal-title&quot;&gt;Modal title&lt;/h4&gt;
			&lt;/div&gt;
			&lt;div class=&quot;modal-body&quot;&gt;
				&lt;p&gt;Far far away...
				&lt;/p&gt;
			&lt;/div&gt;
			&lt;div class=&quot;modal-footer&quot;&gt;
				&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-simple&quot;&gt;Nice Button&lt;/button&gt;
				&lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-simple&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;


&lt;!-- small alert modal --&gt;
&lt;button class=&quot;btn btn-round btn-rose&quot; data-toggle=&quot;modal&quot; data-target=&quot;#smallAlertModal&quot;&gt;
    Small alert modal
&lt;/button&gt;

&lt;div class=&quot;modal fade&quot; id=&quot;smallAlertModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-small &quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body text-center&quot;&gt;
        &lt;h5&gt;Are you sure you want to do this? &lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer text-center&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn&quot; data-dismiss=&quot;modal&quot;&gt;Never mind&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Yes&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
			</pre>

			</div>
			<!-- end row -->


<!--             collapse row -->
            <div class="tim-row" id="collapse-row">
                <h2>Collapsable Groups</h2>
                <legend></legend>
                <p>We restyled the classic collapsable group, to make it look more like the other elements in material kit.</p>

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <h4 class="panel-title">
                            Collapsible Group Item #1
                            <i class="material-icons">keyboard_arrow_down</i>
                            </h4>
                        </a>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                      <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on ...
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h4 class="panel-title">
                          Collapsible Group Item #2
                          <i class="material-icons">keyboard_arrow_down</i>
                        </h4>
                      </a>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                      <div class="panel-body">
                        Anim pariatur...
                      </div>
                    </div>
                  </div>
                </div>


                <pre class="prettyprint">
&lt;div class=&quot;panel-group&quot; id=&quot;accordion&quot; role=&quot;tablist&quot; aria-multiselectable=&quot;true&quot;&gt;
  &lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-heading&quot; role=&quot;tab&quot; id=&quot;headingOne&quot;&gt;
        &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
            &lt;h4 class=&quot;panel-title&quot;&gt;
            Collapsible Group Item #1
            &lt;i class=&quot;material-icons&quot;&gt;keyboard_arrow_down&lt;/i&gt;
            &lt;/h4&gt;
        &lt;/a&gt;
    &lt;/div&gt;
    &lt;div id=&quot;collapseOne&quot; class=&quot;panel-collapse collapse in&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;headingOne&quot;&gt;
      &lt;div class=&quot;panel-body&quot;&gt;
        Anim pariatur...
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-heading&quot; role=&quot;tab&quot; id=&quot;headingTwo&quot;&gt;
      &lt;a class=&quot;collapsed&quot; role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#collapseTwo&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseTwo&quot;&gt;
        &lt;h4 class=&quot;panel-title&quot;&gt;
          Collapsible Group Item #2
          &lt;i class=&quot;material-icons&quot;&gt;keyboard_arrow_down&lt;/i&gt;
        &lt;/h4&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div id=&quot;collapseTwo&quot; class=&quot;panel-collapse collapse&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;headingTwo&quot;&gt;
      &lt;div class=&quot;panel-body&quot;&gt;
        Anim pariatur...
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
                </pre>
            </div>
<!--             end row -->

	    	<!-- tooltip row -->
	    	<div class="tim-row" id="tooltip-row">
	            <h2>Tooltips</h2>
	            <legend></legend>
	            <p style="margin-bottom: 45px;">We restyled the Bootstrap tooltip.</p>
	            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Button with Tooltip</button>

	    	<pre class="prettyprint">
&lt;!-- Markup --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Tooltip on top&quot;&gt;Button with Tooltip&lt;/button&gt;

&lt;!-- Javascript --&gt;
$(&apos;.btn-tooltip&apos;).tooltip();
			</pre>

			</div>
		    <!-- end row -->

		    <!-- popover row -->
		    <div class="tim-row" id="popover-row">
		        <h2>Popovers</h2>
		        <legend></legend>
		        <p>
		            We restyled the Bootstrap popover to align it with the Material Design Concept. <br />
		            See the following example:
		        </p>
		        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover.">On top</button>
		    <pre class="prettyprint">
&lt;!-- markup --&gt;

&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-toggle=&quot;popover&quot; data-placement=&quot;top&quot; title=&quot;Popover on top&quot; data-content=&quot;Here will be some very useful information about his popover.&quot;&gt;On top&lt;/button&gt;


&lt;!-- javascript --&gt;

$(&#39;[data-toggle=&quot;popover&quot;]&#39;).popover();
			</pre>
		    </div>
		    <!-- end row -->

<!--             file uploader row -->
            <div class="tim-row" id="uploader-row">
                <h2>File Uploader</h2>
                <legend></legend>
                <p>We have added a custom file uploader for the kit. It is based on the file uploader open sourced by Jasny, which you can see <a href="http://www.jasny.net/bootstrap/javascript/">here</a>. You can test it and see the implementation below.</p>
                <div class="row">
                    <div class="col-md-5 col-sm-8">
                        <h4><small>Regular Image</small></h4>
                        <div class="fileinput fileinput-new text-center" data-provides="fileinput">
                          <div class="fileinput-new thumbnail img-raised" style="max-width: 400px; max-height: 250px;">
                            <img src="img/image_placeholder.jpg" alt="...">
                          </div>
                          <div class="fileinput-preview fileinput-exists thumbnail img-raised" style="max-width: 400px; max-height: 250px;"></div>
                          <div>
                            <span class="btn btn-round btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
                            <a href="#pablo" class="btn btn-danger btn-simple fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
                          </div>
                        </div>
                    </div>
                </div>
                <pre class="prettyprint">
&lt;h4&gt;&lt;small&gt;Regular Image&lt;/small&gt;&lt;/h4&gt;
&lt;div class=&quot;fileinput fileinput-new text-center&quot; data-provides=&quot;fileinput&quot;&gt;
  &lt;div class=&quot;fileinput-new thumbnail img-raised&quot; style=&quot;max-width: 400px; max-height: 250px;&quot;&gt;
    &lt;img src=&quo="img/image_placeholder.jpg&quot; alt=&quot;...&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;fileinput-preview fileinput-exists thumbnail img-raised&quot; style=&quot;max-width: 400px; max-height: 250px;&quot;&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;span class=&quot;btn btn-round btn-default btn-file&quot;&gt;&lt;span class=&quot;fileinput-new&quot;&gt;Select image&lt;/span&gt;&lt;span class=&quot;fileinput-exists&quot;&gt;Change&lt;/span&gt;&lt;input type=&quot;file&quot; name=&quot;...&quot;&gt;&lt;/span&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-danger btn-simple fileinput-exists&quot; data-dismiss=&quot;fileinput&quot;&gt;&lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt; Remove&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
                </pre>
            </div>
<!--             end row -->

			<!-- icons row -->
		    <div class="tim-row" id="icons-row">
		        <h2>Material Icons</h2>
		        <legend></legend>
		        <p>
		            Through most of the examples in this kit, we have used the default <a href="https://design.google.com/icons/" target="_blank">Icons for the Material Design</a> provided by Google.
		        </p>
		        <i class="material-icons">face</i>
		    <pre class="prettyprint">

&lt;i class=&quot;material-icons&quot;&gt;face&lt;/i&gt;
			</pre>
		    </div>
		    <!-- end row -->


		    <!-- notification row -->
		    <div class="tim-row" id="notification-row">
		        <h2> Notifications </h2>
		        <legend></legend>
		        <p>The new notifications are looking fresh and clean. They go great with the navbar. For the following notification examples we used the <code>.container-fluid</code> class, so they will be fluid. Please use the class <code>.container</code> when you use them outside of the <code>.wrapper</code> so they will be aligned with the general page container.</p>

				<div class="alert alert-info">
		            <div class="container-fluid">
						<div class="alert-icon">
							<i class="material-icons">info_outline</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>

		            	<b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
		            </div>
		        </div>
		        <div class="alert alert-success">
		            <div class="container-fluid">
						<div class="alert-icon">
							<i class="material-icons">check</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>
		            	<b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
		            </div>
		        </div>
		        <div class="alert alert-warning">
		             <div class="container-fluid">
						 <div class="alert-icon">
							<i class="material-icons">warning</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>
		                 <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
		            </div>
		        </div>
		        <div class="alert alert-danger">
		             <div class="container-fluid">
						 <div class="alert-icon">
							<i class="material-icons">error_outline</i>
						</div>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true"><i class="material-icons">clear</i></span>
						</button>
		                 <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
		            </div>
		        </div>

				<pre class="prettyprint">
&lt;div class=&quot;alert alert-info&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;info_outline&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Info alert:&lt;/b&gt; You&#39;ve got some friends nearby, stop looking at your phone and find them...
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-success&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;check&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Success Alert:&lt;/b&gt; Yuhuuu! You&#39;ve got your $11.99 album from The Weeknd
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-warning&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
	&lt;i class=&quot;material-icons&quot;&gt;warning&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Warning Alert:&lt;/b&gt; Hey, it looks like you still have the &quot;copyright &amp;copy;  2015&quot; in your footer. Please update it!
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;alert alert-danger&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;alert-icon&quot;&gt;
    &lt;i class=&quot;material-icons&quot;&gt;error_outline&lt;/i&gt;
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
	&lt;span aria-hidden=&quot;true&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;clear&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;b&gt;Error Alert:&lt;/b&gt; Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
&lt;/div&gt;
&lt;/div&gt;
				</pre>
			</div>
			<!-- end row -->


<!--             info areas row -->
            <div class="tim-row" if="info-areas-row">
                <h2> Info Areas </h2>
		        <legend></legend>
		        <p> The information areas are a simple way to organise large amounts of information into chunks. You can also add icons, simple or coloured. For an horizontal alignment use the custom class <code>.info-horizontal</code>. For the title, please use the class <code>.info-title</code>. You can see more illustrative examples below: </p>
                <div class="row">
    				<div class="col-md-6 text-center">
    					<div class="info">
    						<div class="icon icon-primary">
    							<i class="material-icons">chat</i>
    						</div>
    						<h4 class="info-title">Free Chat</h4>
    						<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
    					</div>
    				</div>
    				<div class="col-md-6">
                        <div class="info info-horizontal">
    						<div class="icon icon-rose">
    							<i class="material-icons">group_work</i>
    						</div>
    						<div class="description">
    							<h4 class="info-title">Collaborate</h4>
    							<p>The moment you use Material Kit, you know you’ve never felt anything like it. With a single use, this powerfull UI Kit lets you do more than ever before. </p>
    							<a href="#pablo">Find more...</a>
    						</div>
    		        	</div>
    				</div>
                </div>
		        <pre class="prettyprint">

&lt;div class=&quot;info&quot;&gt;
	&lt;div class=&quot;icon icon-primary&quot;&gt;
		&lt;i class=&quot;material-icons&quot;&gt;chat&lt;/i&gt;
	&lt;/div&gt;
	&lt;h4 class=&quot;info-title&quot;&gt;Free Chat&lt;/h4&gt;
	&lt;p&gt;Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;info info-horizontal&quot;&gt;
	&lt;div class=&quot;icon icon-rose&quot;&gt;
		&lt;i class=&quot;material-icons&quot;&gt;group_work&lt;/i&gt;
	&lt;/div&gt;
	&lt;div class=&quot;description&quot;&gt;
		&lt;h4 class=&quot;info-title&quot;&gt;Collaborate&lt;/h4&gt;
		&lt;p&gt;The moment you use Material Kit, you know you&rsquo;ve never felt anything like it. With a single use, this powerfull UI Kit lets you do more than ever before. &lt;/p&gt;
		&lt;a href=&quot;#pablo&quot;&gt;Find more...&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;
		        </pre>
            </div>
<!--             end row -->


            <!-- cards row -->
            <div class="tim-row" id="cards-row">
                <h2>Cards</h2>
                <legend></legend>
                <p>We have created a wide variety of cards. We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called <code>.card</code>. The information inside the card usually goes inside the content (class <code>.content</code>). The content can have three types of elements inside: <code>.card-title</code>, <code>.description</code> and <code>.category</code>. You can optionally add a <code>.card-footer</code>, if you want to place a call-to-action. <br />
                </p>
                <h4>Blog Cards</h4>
                <p>If you are building a blog, these cards can be a good fit. Inside the section folder, you will find multiple variations for the blog cards: <a href="sections.html#blogs-1">horizontal cards</a>, <a href="sections.html#blogs-2">vertical cards</a> and <a href="sections.html#blogs-4">big blog listings</a>.</p>
                <p>Here is a coded example of the vertical blog card.</p>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card card-plain card-blog">
							<div class="card-image">
								<a href="#pablo">
									<img class="img img-raised" src="img/examples/card-blog4.jpg" />
								</a>
							</div>

							<div class="content">
								<h6 class="category text-info">Enterprise</h6>
								<h4 class="card-title">
									<a href="#pablo">Autodesk looks to future of 3D printing with Project Escher</a>
								</h4>
								<p class="card-description">
									Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses.<a href="#pablo"> Read More </a>
								</p>
							</div>
                        </div>
                    </div>
                </div>
                <pre class="prettyprint">
&lt;div class=&quot;card card-plain card-blog&quot;&gt;
	&lt;div class=&quot;card-image&quot;&gt;
		&lt;a href=&quot;#pablo&quot;&gt;
			&lt;img class=&quot;img img-raised&quot; src=&quo="img/examples/card-blog4.jpg&quot; /&gt;
		&lt;/a&gt;
	&lt;/div&gt;

	&lt;div class=&quot;content&quot;&gt;
		&lt;h6 class=&quot;category text-info&quot;&gt;Enterprise&lt;/h6&gt;
		&lt;h4 class=&quot;card-title&quot;&gt;
			&lt;a href=&quot;#pablo&quot;&gt;Autodesk looks to future of 3D printing with Project Escher&lt;/a&gt;
		&lt;/h4&gt;
		&lt;p class=&quot;card-description&quot;&gt;
			Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses.&lt;a href=&quot;#pablo&quot;&gt; Read More &lt;/a&gt;
		&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;                    
                </pre>
                
                
                <h4>Team Cards</h4>
                <p>If you want to present your team or you want to build cards for your users, we have created multiple options for cards. You can choose between <a href="sections.html#team-1">round images and descriptions</a>, or <a href="sections.html#team-2">square images and description</a>. You can also go with multiple background options, as you can see in the section page.</p>
                <p>Here is a coded example of an user card with round image and description:</p>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card card-profile card-plain">
    						<div class="card-avatar">
    							<a href="#pablo">
    								<img class="img" src="img/faces/avatar.jpg" />
    							</a>
    						</div>
    
    						<div class="content">
    							<h4 class="card-title">Rebecca Stormvile</h4>
    							<h6 class="category text-muted">Web Developer</h6>
    
    							<p class="card-description">
    								Don't be scared of the truth because we need to restart the human foundation.
    							</p>
    							<div class="footer">
    								<a href="#pablo" class="btn btn-just-icon btn-simple btn-google"><i class="fa fa-google"></i></a>
    								<a href="#pablo" class="btn btn-just-icon btn-simple btn-twitter"><i class="fa fa-twitter"></i></a>
    								<a href="#pablo" class="btn btn-just-icon btn-simple btn-dribbble"><i class="fa fa-dribbble"></i></a>
    							</div>
    						</div>
    					</div>
                    </div>
                </div>
                <pre class="prettyprint">
&lt;div class=&quot;card card-profile card-plain&quot;&gt;
	&lt;div class=&quot;card-avatar&quot;&gt;
		&lt;a href=&quot;#pablo&quot;&gt;
			&lt;img class=&quot;img&quot; src=&quo="img/faces/avatar.jpg&quot; /&gt;
		&lt;/a&gt;
	&lt;/div&gt;

	&lt;div class=&quot;content&quot;&gt;
		&lt;h4 class=&quot;card-title&quot;&gt;Rebecca Stormvile&lt;/h4&gt;
		&lt;h6 class=&quot;category text-muted&quot;&gt;Web Developer&lt;/h6&gt;

		&lt;p class=&quot;card-description&quot;&gt;
			Don't be scared of the truth because we need to restart the human foundation.
		&lt;/p&gt;
		&lt;div class=&quot;footer&quot;&gt;
			&lt;a href=&quot;#pablo&quot; class=&quot;btn btn-just-icon btn-simple btn-google&quot;&gt;&lt;i class=&quot;fa fa-google&quot;&gt;&lt;/i&gt;&lt;/a&gt;
			&lt;a href=&quot;#pablo&quot; class=&quot;btn btn-just-icon btn-simple btn-twitter&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
			&lt;a href=&quot;#pablo&quot; class=&quot;btn btn-just-icon btn-simple btn-dribbble&quot;&gt;&lt;i class=&quot;fa fa-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
                </pre>                

                <h4>Project Cards</h4>
                <p>If you are building a landing page and want to showcase your projects, or if you want to enlist your products these cards are a good option. You have multiple options to choose from: <a href="sections.html#projects-1">cards with image backgrounds</a>, <a href="sections.html#projects-2">square images and text</a> or <a href="sections.html#projects-4">square images and features</a>.</p>
                <p>Here is an example of a project card with square image and text.</p>
                <div class="row">
                    <div class="col-md-5">
    					<div class="card card-plain">
    						<a href="http://www.creative-tim.com/product/light-bootstrap-dashboard-pro" target="_blank">
    							<div class="card-image">
    								<img src="http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_new_thumbnail.jpg?1449352503" />
    							</div>
    						</a>
    						<div class="content">
    
    							<a href="http://www.creative-tim.com/product/light-bootstrap-dashboard-pro" target="_blank">
    								<h4 class="card-title">Light Bootstrap Dashboard</h4>
    							</a>
    							<h6 class="category">Premium Template</h6>
    							<p class="card-description">
    								Light Bootstrap Dashboard PRO is a Bootstrap Admin Theme designed to look simple and beautiful. Forget about boring dashboards and grab yourself a copy to kickstart new project!
    							</p>
    						</div>
    					</div>                        
                    </div>
                </div>
                <pre class="prettyprint">
&lt;div class=&quot;card card-plain&quot;&gt;
	&lt;a href=&quot;http://www.creative-tim.com/product/light-bootstrap-dashboard-pro&quot; target=&quot;_blank&quot;&gt;
		&lt;div class=&quot;card-image&quot;&gt;
			&lt;img src=&quot;http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_new_thumbnail.jpg?1449352503&quot; /&gt;
		&lt;/div&gt;
	&lt;/a&gt;
	&lt;div class=&quot;content&quot;&gt;

		&lt;a href=&quot;http://www.creative-tim.com/product/light-bootstrap-dashboard-pro&quot; target=&quot;_blank&quot;&gt;
			&lt;h4 class=&quot;card-title&quot;&gt;Light Bootstrap Dashboard&lt;/h4&gt;
		&lt;/a&gt;
		&lt;h6 class=&quot;category&quot;&gt;Premium Template&lt;/h6&gt;
		&lt;p class=&quot;card-description&quot;&gt;
			Light Bootstrap Dashboard PRO is a Bootstrap Admin Theme designed to look simple and beautiful. Forget about boring dashboards and grab yourself a copy to kickstart new project!
		&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;                                            
                </pre>
                
                
                <h4>Pricing Cards</h4>
                <p>If you are building a subscription-based application or if you have a multiple-plan service, you can use the pricing cards. You can choose between pricing cards <a href="sections.html#pricing-1">with icons</a>, <a href="sections.html#pricing-2">with numbers</a> or <a href="sections.html#pricing-4">with coloured background</a>.</p>
                <p>Here is an example of a pricing card with icon.</p>
                <div class="row">
                    <div class="col-md-5">
    					<div class="card card-pricing card-raised">
    						<div class="content">
    							<h6 class="category">Small Company</h6>
    							<div class="icon icon-rose">
    								<i class="material-icons">home</i>
    							</div>
    							<h3 class="card-title">$29</h3>
    							<p class="card-description">
    								This is good if your company size is between 2 and 10 Persons.
    							</p>
    							<a href="#pablo" class="btn btn-rose btn-round">Choose Plan</a>
    						</div>
    					</div>                        
                    </div>
                </div>
                
                <pre class="prettyprint">
&lt;div class=&quot;card card-pricing card-raised&quot;&gt;
	&lt;div class=&quot;content&quot;&gt;
		&lt;h6 class=&quot;category&quot;&gt;Small Company&lt;/h6&gt;
		&lt;div class=&quot;icon icon-rose&quot;&gt;
			&lt;i class=&quot;material-icons&quot;&gt;home&lt;/i&gt;
		&lt;/div&gt;
		&lt;h3 class=&quot;card-title&quot;&gt;$29&lt;/h3&gt;
		&lt;p class=&quot;card-description&quot;&gt;
			This is good if your company size is between 2 and 10 Persons.
		&lt;/p&gt;
		&lt;a href=&quot;#pablo&quot; class=&quot;btn btn-rose btn-round&quot;&gt;Choose Plan&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;                                            
                </pre>
            </div>
            <!-- end row -->

            <!--sections row -->
            <div class="tim-row" id="sections-row">
                <h2>Sections</h2>
                <legend></legend>
                <p>We have created multiple options for the background of sections. You can go with a white, gray or black colour or with a coloured gradient. To see how they look and what class you need to use for them, you can check them out below.</p>
                <span class="pick-class-label label-tooltip" style="background-color: #FFFFFF;" data-toggle="tooltip" data-placement="top" title="section-white"> </span>
                <span class="pick-class-label label-tooltip" style="background-color: #EEEEEE;" data-toggle="tooltip" data-placement="top" title="section-light-gray"> </span>
                <span class="pick-class-label label-tooltip" style="background-color: #E5E5E5;" data-toggle="tooltip" data-placement="top" title="section-gray"> </span>
                <span class="pick-class-label label-tooltip" style="background-color: #343434;" data-toggle="tooltip" data-placement="top" title="section-dark"> </span>
                <br /><br />
                <span class="pick-class-label label-tooltip section-primary" data-toggle="tooltip" data-placement="top" title="section-primary"> </span>
                <span class="pick-class-label label-tooltip section-info" data-toggle="tooltip" data-placement="top" title="section-info"> </span>
                <span class="pick-class-label label-tooltip section-success" data-toggle="tooltip" data-placement="top" title="section-success"> </span>
                <span class="pick-class-label label-tooltip section-warning" data-toggle="tooltip" data-placement="top" title="section-warning"> </span>
                <span class="pick-class-label label-tooltip section-danger" data-toggle="tooltip" data-placement="top" title="section-danger"> </span>
                <span class="pick-class-label label-tooltip section-rose" data-toggle="tooltip" data-placement="top" title="section-rose"> </span>


            </div>
            <!-- end row -->

            <!-- end container -->
            </div>

        </div>
        </div>
    </div>
    </div>
    <footer class="footer footer-transparent">
        <div class="container">
            <nav class="pull-left">
                <ul>
					<li>
						<a href="http://www.creative-tim.com">
							Creative Tim
						</a>
					</li>
					<li>
						<a href="http://presentation.creative-tim.com">
						   About Us
						</a>
					</li>
					<li>
						<a href="http://blog.creative-tim.com">
						   Blog
						</a>
					</li>
					<li>
						<a href="http://www.creative-tim.com/license">
							Licenses
						</a>
					</li>
                </ul>
            </nav>
            <div class="social-area pull-right">
                <a class="btn btn-social btn-twitter btn-simple" href="https://twitter.com/CreativeTim">
                    <i class="fa fa-twitter"></i>
                </a>
                <a class="btn btn-social btn-facebook btn-simple" href="https://www.facebook.com/CreativeTim">
                    <i class="fa fa-facebook-square"></i>
                </a>
                <a class="btn btn-social btn-google btn-simple" href="https://plus.google.com/+CreativetimPage">
                    <i class="fa fa-google-plus"></i>
                </a>
            </div>
            <div class="copyright">
                &copy; <script>document.write(new Date().getFullYear())</script> Creative Tim, made with love
            </div>
        </div>
    </footer>


<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					<i class="material-icons">clear</i>
				</button>
				<h4 class="modal-title">Modal title</h4>
			</div>
			<div class="modal-body">
				<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default btn-simple">Nice Button</button>
				<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<!--  End Modal -->

<!-- small modal -->
<div class="modal fade" id="smallAlertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-small ">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="material-icons">clear</i></button>
      </div>
      <div class="modal-body text-center">
        <h5>Are you sure you want to do this? </h5>
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-simple" data-dismiss="modal">Never mind</button>
        <button type="button" class="btn btn-success btn-simple">Yes</button>
      </div>
    </div>
  </div>
</div>
<!--    end small modal -->

</body>
	<!--   Core JS Files   -->
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/material.min.js"></script>

	<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
	<script src="js/nouislider.min.js" type="text/javascript"></script>

	<!--  Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ -->
	<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>

    <!--     Plugin for select form control -->
    <script src="js/jquery.dropdown.js" type="text/javascript"></script>

    <!--     Plugin for tags -->
    <script src="js/jquery.tagsinput.js"></script>

    <!--  for fileupload -->
    <script src="js/jasny-bootstrap.min.js"></script>

	<!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
	<script src="js/material-kit.js" type="text/javascript"></script>

    <script>
        var header_height;
        var fixed_section;
        var floating = false;

        $().ready(function(){
            suggestions_distance = $("#suggestions").offset();
            pay_height = $('.fixed-section').outerHeight();

			$(window).on('scroll', materialKit.checkScrollForTransparentNavbar);

			// the body of this function is i="material-kit.js
			materialKit.initSliders();
        });
    </script>

</html>
